<!doctype html>
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Register Form</title>


<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--login script-->

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">

function register(){
	//console.log($('#username').value());
}

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<!--Slider-in icons-->
<script type="text/javascript">
$(document).ready(function() {
	$(".username").focus(function() {
		$(".user-icon").css("left","-48px");
	});
	$(".username").blur(function() {
		$(".user-icon").css("left","0px");
	});
	
	$(".password").focus(function() {
		$(".pass-icon").css("left","-48px");
	});
	$(".password").blur(function() {
		$(".pass-icon").css("left","0px");
	});
	
	

	
	$('#username').focus(); // Focus to the username field on body loads
	function register(){ // Create `click` event function for login
		var username = $('#username'); // Get the username field
		var password = $('#password');
		var password2 = $('#password2');
		
		

		var register_result = $('.login_result'); // Get the login result div
		register_result.html('loading..'); // Set the pre-loader can be an animation
		if(username.val() == ''){ // Check the username values is empty or not
			username.focus(); // focus to the filed
			register_result.html('<span class="error">Enter the username</span>');
			return false;
		}
		if(password.val() == ''){ // Check the password values is empty or not
			password.focus();
			register_result.html('<span class="error">Enter the password</span>');
			return false;
		}
		if(password.val()!=password2.val()){
			password.focus();
			register_result.html('<span class="error">Confirm Password does not match+</span>')
		}
		if(username.val() != '' && password.val() != ''){ // Check the username and password values is not empty and make the ajax request
			var UrlToPass = 'action=login&username='+username.val()+'&password='+password.val();
			/*$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
			type : 'POST',
			data : UrlToPass,
			url  : 'checker.php',
			success: function(responseText){ // Get the result and asign to each cases
				if(responseText == 0){
					login_result.html('<span class="error">Username or Password Incorrect!</span>');
				}
				else if(responseText == 1){
					window.location = 'game.html';
				}
				else{
					alert('Problem with sql query');
				}
			}
			});*/
		}
		
	}

	
	
	
});
</script>

</head>
<body>

<!--WRAPPER-->
<div id="wrapper">

	<!--SLIDE-IN ICONS-->
    <div class="user-icon"></div>
    <div class="pass-icon"></div>
    <!--END SLIDE-IN ICONS-->

<!--LOGIN FORM-->
<form name="register-form" class="register-form">

	<!--HEADER-->
    <div class="header">
    <!--TITLE--><h1>Picture Labeling Game</h1><!--END TITLE-->
    <!--DESCRIPTION--><span>Type username and password for your account.<td colspan="2"><h2><div class="login_result" id="login_result"></div></td></h2></span><!--END DESCRIPTION-->
    </div>
    <!--END HEADER-->
	
	<!--CONTENT-->
    <div class="content">
					
	<!--USERNAME--><input name="username" id="username" type="text" class="input username" value="Username" onfocus="this.value=''" /><!--END USERNAME-->
    
	<!--PASSWORD--><input name="password" type="password" id="password" class="input password" value="Password" onfocus="this.value=''" /><!--END PASSWORD-->
    <!--PASSWORD--><input name="password2" type="password" id="password2" class="input password" value="Password2" onfocus="this.value=''" /><!--END PASSWORD-->
    </div>
    <!--END CONTENT-->
    
    <!--FOOTER-->
    <div class="footer">
     <!--REGISTER BUTTON--><input type="submit" name="submit" value="Register" class="button"/><!--END REGISTER BUTTON-->
   
	</div>
    <!--END FOOTER-->

</form>
<!--END LOGIN FORM-->

</div>
<!--END WRAPPER-->

<!--GRADIENT--><div class="gradient"></div><!--END GRADIENT-->

</body>
</html>